Submitted by toniher on
En un anterior apunt parlàvem de com generar vídeos oberts des del Mac OS X; però com també vam veure, malauradament no tots els navegadors poden reproduir-los encara.
Davant d'aquesta circumstància, i per tal que tothom pugui veure els continguts, però oferint alhora preferentment l'opció de vídeo obert (Ogg Theora+Vorbis) a aquells navegadors que el poden ja reproduir per defecte, he seguit les instruccions que es poden trobar en aquesta excel·lent guia: Video for Everybody.
Per al vídeo de Flash, que he generat a partir de l'MP4 amb l'Avidemux, utilitzo un reproductor lliure que he instal·lat al meu lloc web: Flowplayer. Podreu adonar-vos que aquest reproductor de Flash funcionarà per exemple amb un Firefox 3 amb el connector pertinent, però no en canvi amb el Firefox 3.5; atès que aquest darrer executarà directament el vídeo en format ogg. Com a element addicional, també incloc el vídeo en format MP4, que hauria de preferir-se a navegadors com el Safari 4 quan no estiguin instal·lats els components XiphQT (necessaris per a reproduir Ogg amb el connector del QuickTime).
Com a exemple, una panoràmica del meu nou aquari Tanganyika i alguns dels seus habitants. Més a sota (en la visualització completa de l'apunt), podeu veure el codi emprat. En principi, des de la majoria de navegadors es podria veure el contingut (amb la instal·lació del connector Flash quan s'escaigui).
He d'admetre que, perquè rutlli si més no als navegadors més habituals, he hagut de dedicar més estona del que hagués imaginat. Per motius que desconec, i que em tocarà informar al projecte, no he pogut servir el mètode clàssic d'Embed/Object amb el Flowplayer, i he hagut de recórrer al Javascript (que tot i així em sembla que és la forma que recomanen). En un altre apunt podeu veure com seria el mateix emprant aqueixes dues etiquetes.
Per altra banda, el Safari 4 sembla que ignora el paràmetre controls de l'etiqueta video i ens obliga a utilitzar una mica més de JavaScript per tal que no hàgim de posar necessàriament la reproducció automàtica (autoPlay) per a poder visualitzar el vídeo.
La veritat és que hagués preferit que hi hagués hagut menys JavaScript en tot plegat; però a causa de les limitacions actuals d'alguns navegadors i perquè, en definitiva, l'HTML 5 i noves etiquetes com la video encara no és quelcom plenament definitiu, cal entendre totes aquestes complicacions addicionals.
Espero que la meua experiència serveixi per a tothom qui es plantegi començar a treballar amb les possibilitats del vídeo obert en la vida real. Gent com la de Dailymotion ja porten uns mesos fent-ho...
<!-- script del Flowplayer - Flash -->
<script src="/flowplayer/flowplayer-3.1.4.min.js"></script>
<video height="480" width="640" autobuffer controls poster="/videos/Meu_Tanganyika.png">
<!-- video per a Firefox 3.5 -->
<source src="/videos/Meu_Tanganyika.ogv" type="video/ogg; codecs="theora, vorbis""/>
<!--- video per a Safari -->
<source src="/videos/Meu_Tanganyika.mp4" type="video/mp4; codecs="mp4v.20.240, mp4a.40.2""/>
<!-- Flash per a la resta -->
<a
href="/videos/Meu_Tanganyika.flv"
style="display:block;width:640px;height:480px;"
id="player">
</a>
</video>
<!-- Codi del Flowplayer per a reproduir el vídeo en Flash -->
<script language="JavaScript">
flowplayer("player", "/flowplayer/flowplayer-3.1.3.swf", {
clip: {
autoPlay: true,
autoBuffering: true
},
playlist: [
{url: '/videos/Meu_Tanganyika.png'},
{url: '/videos/Meu_Tanganyika.flv', autoPlay: false}
]
});
</script>
<!-- Javascript per a reproduir vídeo al Safari -->
<script>
function playPause() {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<!--- Div contenidor del botó de reproducció del vídeo -->
<div id="playInput"></div>
<!--- Creació del botó de reproducció, necessari per al Safari, no apareix amb el Flash -->
<script>
var v = document.createElement("video");
if ( v.play ) {
document.getElementById('playInput').innerHTML = '<input type=button onclick="playPause()" value="Play/Pause" />';
}
</script>
Altres referències
